<template>
  <a-form-item :name="formItem.name" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }"
    :class="formItem.associated ? 'form-a-radio-group_associated' : 'form-a-number-input'">
    <div class="btn-box">
      <a-button type="primary" @click="addValue">新增模型</a-button>
      <a-tooltip placement="right">
        <template #title>
          <span>模型来源于配置管理-内容模型列表</span>
        </template>
        <i class="iconfont icon-hint1" style="font-size: 16px; margin-left: 8px">
        </i>
      </a-tooltip>
    </div>
    <div v-if="formItem.value && formItem.value.length" class="model-list">
      <div v-for="(item, index) in formItem.value" :key="item.id" class="model-item">
        <a-tooltip v-if="item.modelName.length > 6" :title="item.modelName">
          <a-tag :disabled="formItem.disabled" :closable="true" @close="handleClose(item)">
            {{ `${item.modelName.slice(0, 6)}...` }}
          </a-tag>
        </a-tooltip>
        <a-tag v-else :closable="true" @close="handleClose(item)">
          {{ item.modelName }}
        </a-tag>
      </div>
    </div>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, nextTick, watch, computed } from "vue"
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
const emit = defineEmits(['changeName'])
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
})
let formItem: any = ref(props.formItem as any);
useColumnItem(computed(() => props.formItem), formItem)

const addValue = () => {
  formItem.value.isVisible = true
};

const handleClose = (selectItem: dataSourceType) => {
  formItem.value.value = formItem.value.value && formItem.value.value.length && formItem.value.value.filter((item: any) => item.id != selectItem.id)
}

</script>

<style lang="less" scoped>
.btn-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.model-list {
  margin-top: 8px;
  max-width: 568px;
  height: 208px;
  background: #FFFFFF;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 569px;
  overflow: auto;
}
</style>